<template>
	<view class="content">
		<view class="image-area">
			<view class="image-container original-image" @click="selectImage">
				<text class="placeholder" v-if="!originalImage">点击选择图片</text>
				<image :src="originalImage" v-if="originalImage"></image>
			</view>
			<view class="image-container compressed-image">
				<text class="placeholder" v-if="!compressedImage">压缩后图片</text>
				<image :src="compressedImage" v-if="compressedImage" mode="aspectFit"></image>
			</view>
		</view>
		<view class="button-area">
			<button class="compress-button" @click="compressImage">开始压缩</button>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import Compressor from 'compressorjs';
	const originalImage = ref('');
	const compressedImage = ref('');
	const originalFile = ref(null);
	const originalFileSize = ref(0);
	const selectImage = () => {
		uni.chooseImage({
			count: 1, // 最多选择一张图片
			sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
			success: (res) => {
				const tempFilePath = res.tempFilePaths[0];
				originalImage.value = tempFilePath;
				originalFile.value = res.tempFiles[0];
				uni.getFileInfo({
					filePath: tempFilePath,
					success: (info) => {
						const sizeKB = info.size / 1024;
						if (sizeKB >= 1024) {
							const sizeMB = sizeKB / 1024;
							console.log('选中图片大小:', sizeMB.toFixed(2), 'MB');
						} else {
							console.log('选中图片大小:', sizeKB.toFixed(2), 'KB');
						}
					},
					fail: (err) => {
						console.error('获取文件信息失败', err);
					}
				});
			},
			fail: (err) => {
				console.error('选择图片失败', err);
			}
		});
	};

	const compressImage = () => {
			new Compressor(originalFile.value, {
			quality: 0.6, // 压缩质量，范围从0到1
			success(result) {
				compressedImage.value = URL.createObjectURL(result);
				const sizeKB = result.size / 1024;
				if (sizeKB >= 1024) {
							const sizeMB = sizeKB / 1024;
							console.log('压缩后图片大小:', sizeMB.toFixed(2), 'MB');
						} else {
							console.log('压缩后图片大小:', sizeKB.toFixed(2), 'KB');
						}
			},
			error(err) {
				console.error('压缩失败:', err);
			}
		})


	};
</script>

<style lang="less" scoped>
	view{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	.content {
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		box-sizing: border-box;

		.image-area {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.image-container {
				width: 48%;
				height: 350rpx;
				border: 2rpx dashed #ccc;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #f8f8f8;
				border-radius: 10rpx;
				overflow: hidden;

				.placeholder {
					color: #999;
					font-size: 32rpx;
				}

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.button-area {
			display: flex;
			justify-content: center;
			padding-bottom: 30rpx;

			.compress-button {
				width: 80%;
				height: 90rpx;
				line-height: 90rpx;
				background-color: #007aff;
				color: #fff;
				font-size: 36rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>
